<template>
  <div class="layout">
    <div class="header">
      <div class="top-menu">
        <div class="top-menu-item" v-for="(item, index) in menuData2" @click="clickTop(item, index)" >{{ item.name }}</div>
        <!-- <div class="top-menu-item">项目</div>
        <div class="top-menu-item">栏目管理</div>
        <div class="top-menu-item">反馈信息</div> -->
      </div>
      <button @click="logout">退出登录</button>
      <!-- 顶部 -->
    </div>
    <div class="main">
      <!-- 内容区域 -->
      <div class="menu">
        <menu-template :list="menuData"></menu-template>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import menuData from '@/assets/data/menu.json'
  import menuData2 from '@/assets/data/menu2.json'
  
  import menu from './components/menu'
  
  export default {
    components: {
      menuTemplate: menu,
    },
    data() {
      return {
        // style: { 'background-color': 'red' },
        menuData, // 左侧菜单数据
        menuData2, // 所有菜单数据
        menuActiveIndex: '', // 被点击的菜单的索引
      }
    },
    created() {
      console.log('页面初始化,校验登录状态')
      console.log('menuData2', this.menuData2)
    },
    methods: {
      test() {
        console.log('123123')
      },
      clickTop(top, index) {
        console.log('点击了顶部菜单', top, index)
        const menuData = top.children
        console.log('menuData', menuData)
        this.menuData = menuData
      },
      // 点击左侧菜单
      clickMenu(menu, index) {
        const path = menu.path
        if (path != this.$route.path) {
          this.$router.push(path)
        }
        
        this.menuActiveIndex = index // 点击的时候改变被点击的菜单的索引
        // menu.showChildren = !menu.showChildren // 显示当前菜单的子菜单, 由于vue的监听数据变化的原理,造成无法监听对象内的属性变化
        this.$set(menu, 'showChildren', !menu.showChildren) // 显示当前菜单的子菜单
        console.log('menu.showChildren', menu.showChildren)
        console.log(`当前点击了第${index}个菜单`)
      },
      logout() {
        this.$request({
          url: '/admin/index/logout',
          method: 'get',
        }).then((result) => {
          const res = result.data
          console.log('退出登录接口返回', res)
        })
      }
    },
  }
</script>

<style scoped>
  .layout {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .header {
    position: absolute;
    width: 100%;
    top: 0;
    height: 50px;
    background-color: #ccc;
  }

  .main {
    position: absolute;
    top: 50px;
    width: 100%;
    bottom: 0;
    display: flex;
  }

  .menu {
    width: 200px;
    background-color: #006400;
  }

  .content {
    flex: 1;
  }

  .menu .item {
    display: block;
    color: white;
    padding: 6px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  .active {
    background-color: red;
  }

  .top-menu-item {
    display: inline-block;
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
</style>
